<template>
  <div id="echartsJynywblqk" />
</template>

<script>
import Sever from '@/api/selfApi'
export default {
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {
      echartsJynywblqk: null
    }
  },
  watch: {
    depCode(newValue, oldValue) {
      this.initData()
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    async initData() {
      //请求后台返回数据
      try {
        //请求后台接口
        const res = await Sever.ywfx.getYearBusiness({
          dep_code: this.depCode
        })
        console.log(res)
        var months = []
        var dshs = []
        res.forEach((element) => {
          months.push(element.MONTH)
          dshs.push(element.DSH_SUM)
        })
        console.log(months)

        var option = {
          grid: {
            top: '50',
            left: '5',
            right: '5',
            bottom: '0',
            containLabel: true
          },
          title: {
            text: '近1年业务办理情况',
            left: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            splitLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              color: 'black',
              fontSize: 14,
              textStyle: {
                color: '#fff'
              }
            },
            data: months
          },
          yAxis: {
            type: 'value',
            show: false,
            splitLine: { show: false },
            axisLabel: { show: false }
          },
          series: [
            {
              type: 'line',
              smooth: false,
              symbol: 'circle',
              symbolSize: 48,
              label: {
                show: true,
                position: 'inside',
                color: '#fff'
              },
              itemStyle: {
                normal: {
                  color: '#339966',
                  lineStyle: {
                    color: '#00ca95',
                    width: 1
                  },
                  areaStyle: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 1,
                      x2: 0,
                      y2: 0,
                      colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(33,218,148, 0.1)' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#21da94' // 100% 处的颜色
                        }
                      ]
                    }
                  }
                }
              },
              data: dshs
            }
          ]
        }
        const chartDom = document.getElementById('echartsJynywblqk')
        this.echartsJynywblqk = this.$echarts.init(chartDom)
        this.echartsJynywblqk.setOption(option)
        this.echartsJynywblqk.on('click', (params) => {
          console.log(params)
          // this.$emit('handleOpen5', params)
        })

        window.addEventListener(
          'resize',
          () => this.echartsJynywblqk.resize(),
          false
        )
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang='scss'>
#echartsJynywblqk {
  width: 100%;
  height: 100%;
}
</style>
